<template>
  <div class="container">
    <div v-if="!flag">
      <div class="web1" v-for="item in web" :key="item.title">
        <img :src="require('../assets/images/' + item.url)" alt="" />
        <div class="web_shadow"></div>
        <div :class="item.class"></div>
        <div class="textbox">
          <div class="text_title mb_10">{{ $t(item.title) }}</div>
          <div class="text_tip">
            {{ $t(item.tip, { num: currentYear - 2014 }) }}
          </div>
          <p
            class="text_content"
            v-for="(text, index) in item.content"
            :key="index"
          >
            {{ $t(text, { appName: appName }) }}
          </p>
        </div>
      </div>
    </div>
    <div v-else class="else">
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script>
import { aboutUsInfo } from "@/api/article";
export default {
  data() {
    return {
      title: "",
      abstract: "",
      create_time: "",
      isapi: process.env.VUE_FOOTER_ABOUT,
      appName: window.VUE_APP_NAME,
      flag: false, //是否自定义
      content: "", //自定义模板
      web: [
        {
          url: "web3.png",
          title: "webpage.wtitle1",
          tip: "webpage.wtip1",
          class: "box1",
          content: ["webpage.wcontent1", "webpage.wcontent2"],
        },
        {
          url: "web4.png",
          title: "webpage.wtitle2",
          tip: "webpage.wtip2",
          class: "box2",
          content: [
            "webpage.wcontent3",
            "webpage.wcontent4",
            "webpage.wcontent5",
          ],
        },
        {
          url: "web1.png",
          title: "webpage.wtitle3",
          tip: "webpage.wtip3",
          class: "box3",
          content: ["webpage.wcontent6"],
        },
        {
          url: "web2.png",
          title: "webpage.wtitle4",
          tip: "webpage.wtip4",
          class: "box4",
          content: ["webpage.wcontent7", "webpage.wcontent8"],
        },
      ],
    };
  },
  created() {
    this.getDetail();
    // let list = this.$store.state.user.systemInfo;
    // list.forEach(ele => {
    //   if (ele.key === "about_us_pc") {
    //     if (ele.value === 2) {
    //       this.flag = true;
    //     }
    //   }
    //   if (ele.key === "about_us_pc_custom") {
    //     this.content = ele.value;
    //   }
    // });
  },
  methods: {
    getDetail() {
      let type = "pc";
      aboutUsInfo(type)
        .then((res) => {
          if (res.data.about_us == 2) {
            this.flag = true;
            this.content = res.data.about_us_custom;
          } else {
            this.flag = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goBefore() {
      this.$router.back(-1);
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = this.change(date.getDate()) + " ";
      var h = this.change(date.getHours()) + ":";
      var m = this.change(date.getMinutes()) + ":";
      var s = this.change(date.getSeconds());
      return Y + M + D + h + m + s;
    },
    change(t) {
      if (t < 10) {
        return "0" + t;
      } else {
        return t;
      }
    },
  },
  setup() {
    const currentYear = new Date().getFullYear();
    return {
      currentYear,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: auto;
}
.else {
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
  position: relative;
  /deep/p {
    padding: 0;
    margin: 0;
  }
  /deep/.wscnph {
    width: 100%;
    display: block;
  }
}
.web1 {
  width: 100%;
  height: auto;
  position: relative;
}

.web_shadow {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 88;
}
.web1 img {
  width: 100%;
}

.textbox {
  width: 300px;
  word-break: break-all;
  height: auto;
  position: absolute;
  left: 30%;
  top: 30%;
  color: white;
  z-index: 90;
}
.textbox {
  width: 300px;
  height: auto;
  position: absolute;
  left: 40%;
  top: 30%;
  color: white;
  z-index: 90;
}
.mb_10 {
  margin-bottom: 10px;
}

.text_title {
  width: 100%;
  // height: 30px;
  line-height: 30px;
  font-size: 25px;
}

.text_tip {
  width: 100%;
  // height: 30px;
  line-height: 30px;
  font-size: 16px;
}

.text_content {
  width: 100%;
  line-height: 30px;
  font-size: 12px;
}

// .box1 {
//   width: 100px;
//   height: 102px;
//   background: #03000b;
//   position: absolute;
//   left: 42%;
//   top: 30%;
//   opacity: 0.6;
// }
// .box2 {
//   width: 158px;
//   height: 96px;
//   background: #03000b;
//   position: absolute;
//   left: 40%;
//   top: 30%;
//   opacity: 0.6;
// }
// .box3 {
//   width: 81px;
//   height: 160px;
//   background: #03000b;
//   position: absolute;
//   left: 40%;
//   top: 30%;
//   opacity: 0.6;
// }
// .box4 {
//   width: 168px;
//   height: 101px;
//   background: #03000b;
//   position: absolute;
//   left: 35%;
//   top: 35%;
//   opacity: 0.6;
// }
.title {
  font-size: 20px;
  font-weight: bold;
}
.noticeDetail {
  .account-wrap {
    // background: url(../assets/images/account_center_bg.jpg) no-repeat;
    // background-size: cover;
    .account {
      width: 1200px;
      margin: 0 auto;
      padding-top: 30px;
      overflow: hidden;
      min-height: 880px;
      .nav-after {
        display: block;
        height: 10px;
        // background-color: #262a42;
      }
      .account-content {
        width: 100%;
        min-height: 750px;
        // background-color: #181b2a;
        .detailBig {
          padding: 0px 46px 20px;
          .mb30 {
            margin-bottom: 30px;
          }
          .detailContent {
            line-height: 26px;
            // p {
            // 	& > * {
            // 		// background-color: #181b2a!important;
            // 	}
            // }
          }
          .mt5 {
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
